﻿@model WeProjectsModel.Project
<style type="text/css">
    section.container .table td {
        padding-top:3px !important;
        padding-bottom: 3px !important;
    }
    section.container .table tr:nth-child(2) td {
     padding-top:12px !important;
    }
</style>

@{
    List<WeProjectsModel.Task> tasks = ViewBag.mainTask;
    ViewBag.Title = "Details";
    int usrId = int.Parse(Membership.GetUser().ProviderUserKey.ToString());
}


<h2>@Html.DisplayFor(model => model.Title) > 项目进度</h2>
@Html.Partial("_projectMenu",(int)ViewBag.ProjectID) 
<p>项目描述：@Html.Raw(Model.Description)</p>

<canvas id="flyCanvas">
    Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!
</canvas>
@*如果是大项目，则显示小项目列表*@
@if (Model.ParentID == null)
{      
    if (Roles.IsUserInRole("sysadmin")) { 
    <table class="table">
<tr><td style="background-color: #dedede;">(子)项目列表</td>
    <td style="background-color: #dedede;width:180px;">
        @if (Roles.IsUserInRole("sysadmin") || Model.OwnerID==usrId) { 
    @Html.ActionLink("建立(子)项目", "create",new{parentID = Model.ID})}
    </td>
        </tr>
           @foreach (var item in Model.SubProjects.Where(i=>i.ParentID==Model.ID))
           {
               <tr >
                   <td>&nbsp;&nbsp;@Html.DisplayFor(modelItem => item.Title) 
                       @{
               string projOwnerDspName = "";
               if (item.OwnerID != null)
               {
                   projOwnerDspName = item.Owner.DisplayName;
               }
                       }
                       @Html.Label(projOwnerDspName)                       
                   </td>
                   <td>
                       @Html.ActionLink("编辑", "Edit", new { id = item.ID }, new { @class = "btn btn-success btn-small" })&nbsp;
                       @Html.ActionLink("详细", "Details", new { id = item.ID }, new { @class = "btn btn-success btn-small" })&nbsp;
                       @Html.ActionLink("删除", "Delete", new { id = item.ID }, new { @class = "btn btn-danger btn-small" })
                   </td>
               </tr>
           }
        </table>}
}
                                                                     <br/>
@*如果是大小项目，则显示任务列表*@
@*@if(Model.ParentID!=null)
{*@
    <table class="table" id="showProcess">
        <tr>
            <th></th>
            <th>任务描述</th>
            <th style="width:15%;">截止日期</th>
            <th>任务文档</th>
            <th>说明</th>
            <th style="width:15%;">操作</th>
        </tr>
    @foreach (var item1 in tasks)
{
    if (item1.ProjectID == Model.ID)
    {
        //@Html.TR("subTask")
        <tr class="subTask">
            <td>
                @if (item1.Project.ParentProject == null)
                {
                    @*<img src="~/images/Homeproj.png" />*@
                    if (DateTime.Now > item1.Due)
                    {
                        <span class="glyphicon glyphicon-home" aria-hidden="true" style="color:#dfdfdf"></span>
                    }
                    else { 
                        <span class="glyphicon glyphicon-home" aria-hidden="true" style="color:#009900"></span>
                    }
                }
                else
                {
                    @*<img src="~/images/subproj.png" />*@
                    if (DateTime.Now > item1.Due)
                    {
                        <span class="glyphicon glyphicon-file" aria-hidden="true" style="color:#dfdfdf"></span>
                    }
                    else
                    {
                        <span class="glyphicon glyphicon-file" aria-hidden="true" style="color:#009900"></span>
                    }
                }
            </td>
            <td>@Html.DisplayFor(modelItem => item1.Description)</td>
            <td>
                @item1.Due.Value.ToShortDateString()
                @*@Html.Label(item1.Due.Value.ToShortDateString())*@
                @if (DateTime.Now > item1.Due)
                {<b> 已结束</b>}
                else
                {<b> 进行中</b>}
            </td>
            <td>
                @if (ViewBag.TaskDocumentsVisible==true)
                { 
                    foreach (var doc in item1.Documents)
                    {
                        if(Model.ParentProject==null||doc.ProjectID==Model.ID)
                        { 
                        <div>
                            <p style="margin-bottom:0;">@if (doc.Project!=null){@Html.Label(" [" + doc.Project.Title + "]")}</p>
                            <p style="margin-bottom:5px;">@Html.ActionLink(doc.Name, "Download", "Document", new {id=doc.ID },null)</p>
                        </div>
                        }
                    }
                }
        </td>
            <td>@Html.DisplayFor(modelItem => item1.Comment)</td>
            <td>
                @Html.ActionLink("详细", "../Task/Details", new { id = item1.ID,projectID=Model.ID }, new { @class = "btn btn-success btn-small" })&nbsp;
                @if (Roles.IsUserInRole("sysadmin"))
                {
                    @Html.ActionLink("编辑", "../Task/Edit", new { id = item1.ID }, new { @class = "btn btn-success btn-small" })<span>&nbsp;</span>
                    @Html.ActionLink("删除", "../Task/Delete", new { id = item1.ID }, new { @class = "btn btn-danger btn-small" })
                }
            </td>
        </tr>
    }
    else
    {
        //@Html.TR("parentTask")
        <tr class="parentTask">
            <td>
            @*<img src="~/images/homeproj.png" />*@
                @if (DateTime.Now > item1.Due)
                {
                <span class="glyphicon glyphicon-home" aria-hidden="true" style="color:#dfdfdf"></span>
                }
                else {
                <span class="glyphicon glyphicon-home" aria-hidden="true" style="color:#009900"></span>
                }
            </td>
            <td>@Html.DisplayFor(modelItem => item1.Description)</td>
            <td>
                @Html.Label(item1.Due.Value.ToShortDateString())
                @if (DateTime.Now > item1.Due)
                {<b>已结束</b>}
                else
                {<b>进行中</b>}
            </td>
            @*<td>@Html.DisplayFor(modelItem => item1.Responsibility)</td>*@
            <td>@{
                IEnumerable<WeProjectsModel.Document> docs=item1.Documents; 
                if(Model.ParentProject!=null)
                  {
                      docs = from d in item1.Documents
                                 where d.ProjectID == Model.ParentID || d.ProjectID == Model.ID
                                 select d;
                  }
            }
                @foreach (var doc in docs)
            {                
                <div>
                    @Html.Label(" [" + doc.Project.Title + "]")
                    @Html.ActionLink(doc.Name, "Download", "Document", new { id = doc.ID }, null)
                </div>
            }
            </td>
            <td>@Html.DisplayFor(modelItem => item1.Comment)</td>
            <td>
                @Html.ActionLink("详细", "../Task/Details", new { id = item1.ID, projectID = Model.ID }, new { @class = "btn btn-success btn-small" })&nbsp;
                @if (Roles.IsUserInRole("sysadmin"))
                {
                    @Html.ActionLink("编辑", "../Task/Edit", new { id = item1.ID }, new { @class = "btn btn-success btn-small" })<span>&nbsp;</span>
                    @Html.ActionLink("删除", "../Task/Delete", new { id = item1.ID }, new { @class = "btn btn-danger btn-small" })
                 }
            </td>
        </tr>
    }

}
</table>
@*}*@

 @if (Roles.IsUserInRole("sysadmin") || Model.OwnerID == usrId)
{
    @Html.ActionLink("建立任务", "../Task/Create", new { id = Model.ID }, new { @class = "btn btn-primary btn-small" })}
@*<table class="gridtable">
        <tr><th>任务描述</th><th>截止日期</th><th>参与人员</th><th>说明</th><th></th></tr>
    @foreach (var item in Model.Tasks.OrderByDescending(i=>i.Due))
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.Description)</td>
            <td>@Html.DisplayFor(modelItem => item.Due)
            @if (DateTime.Now > item.Due)
{<b>已结束</b>}
else
{<b>进行中</b>}
            </td>
            <td>@Html.DisplayFor(modelItem => item.Responsibility)</td>
            <td>@Html.DisplayFor(modelItem => item.Comment)</td>
            <td>
                @Html.ActionLink("详细", "../Task/Details", new { id = item.ID })
                @if (Roles.IsUserInRole("sysadmin") || Model.OwnerID==usrId) {
                @Html.ActionLink("编辑", "../Task/Edit", new { id = item.ID })
                @Html.ActionLink("删除", "../Task/Delete", new { id = item.ID }) 
                }
            </td>
        </tr>
    }
</table>*@
@*
    <p>
        @Html.ActionLink("Edit", "Edit", new { id=Model.ID }) |
        @Html.ActionLink("Back to List", "Index")
    </p>
*@
@*<script type="text/javascript" src="/Javascripts/jquery.min.js"></script>*@
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<script>
    var data = new Array();
    var invLine;
    var invCircle=new Array();
    var fly;
    var cvsLine;
    var cvsCircle=new Array();
    var cvsTxt = new Array();
    var cvsTriangle = new Array();
    var numShowCircle = 0;
    var intStartDate;
    var intEndDate;
    var numShowRQ = 0;
    var nowDate = new Date().getFullYear() + "/" + formateInt(new Date().getMonth() + 1) + "/" + formateInt(new Date().getDate());
    var step = 0;

    var dWidth = 6;
    var posLineY = 70;
    var lineSpace = 40;
    var rCircleS = 4;
    var rCircleL = 8;
    var lineCircleL = 3;
    var circleSpace = 100;
    var txtYDown=97;
    var txtYUp = 57;
    var txtLineHeight = 15;
    var txtLetterWidth = 12;
    var imgTxtSpace = 5;
    var maxLetter = 7;

    var img = new Array();
    var lineStartPosX = rCircleL + lineSpace;

    $.fn.drawCircle = function () {
        //alert("1111");
    };

    $(document).ready(function (e) {
        setTimeout(init, 100);
    });
    function init() {
        var col = 5; 
        var tmp;
        fly = $("#flyCanvas")[0];
        cvsLine = fly.getContext("2d");
        fly.width = $(".table")[0].offsetWidth;
        cvsLine.clearRect(0, 0, cvsLine.canvas.width, cvsLine.canvas.height);
        dWidth = lineSpace;
        for (var i = 0; i < $('#showProcess').find('tr').length; i++) {
            cvsCircle[i] = fly.getContext('2d');
            cvsTxt[i] = document.getElementById('flyCanvas').getContext('2d');
            cvsTriangle[i] = document.getElementById('flyCanvas').getContext('2d');
            data[i] = new Object();
            if (i == 0) {
                data[i] = { rq: nowDate, ry: "", sm: "当前时间", subTask: false, forSort: changeDateShow(nowDate) };
            } else {
                data[i] = { rq: $('#showProcess tr:eq(' + i + ') td:eq(2)').text().trim().split(" ")[0], ry: $('#showProcess tr:eq(' + i + ') td:eq(3)').text().trim(), sm: $('#showProcess tr:eq(' + i + ') td:eq(1)').text().trim(), subTask: $('#showProcess tr:eq(' + i + ')').hasClass("subTask") }
                tmp = data[i].rq.split("/");
                if (tmp[0].length > 3) {
                    data[i].rq = tmp[0] + "/" + formateInt(tmp[1]) + "/" + formateInt(tmp[2]);
                } else {
                    data[i].rq = tmp[2].substr(0,4) + "/" + formateInt(tmp[0]) + "/" + formateInt(tmp[1]);
                }
                if (data[i].sm.length > 12) {
                    data[i].sm = data[i].sm.substr(0, 13) ;
                }
                data[i].forSort = changeDateShow(data[i].rq);
            }
            tmp = data[i].rq.split("/");
            data[i].forShow = tmp[0].substr(2,2) + "年" + tmp[1] + "月" + tmp[2] + "日";
        }
        //cvsLine.save();
        data.sort(function (a, b) {
            if (a.forSort > b.forSort) {
                return 1;
            } else {
                if (a.forSort < b.forSort) {
                    return -1;
                } else {
                    return 0;
                }
            }
        });
            //$("#flyCanvas").drawCircle();
            data[0].posX = rCircleL + lineCircleL + lineSpace;
            data[data.length - 1].posX = cvsLine.canvas.width - (rCircleL + lineCircleL + lineSpace)*1.3;
            for (i = 0; i < data.length; i++) {
                if (data[i].sm == "当前时间") {
                    intStartDate = i;
                }
                if (data.length > 1 & i != intStartDate & i == data.length-1) {
                    intEndDate = i;
                }
                //备用：if (data[i].sm != "当前时间" && !data[i].subTask) {
                //    intEndDate = i;
                //}
                if (i > 0 && i < data.length - 1) {
                    //alert(i + "   " + (data[i].forSort - data[0].forSort) / (data[data.length - 1].forSort - data[0].forSort));
                    //data[i].posX = (data[i].forSort - data[0].forSort) / (data[data.length - 1].forSort - data[0].forSort) * (cvsLine.canvas.width - (rCircleL + lineCircleL + lineSpace) * 2)
                    //备用：data[i].posX = data[i].posX - data[i - 1].posX > circleSpace ? data[i].posX : data[i - 1].posX + circleSpace
                    data[i].posX = (data[data.length - 1].posX - data[0].posX) * i / (data.length - 1) ;
                }
                cvsCircle[i].draw = function (f_i) {
                    //invCircle[f_i] = setInterval("drawCircle(" + f_i + ")", 20);
                    drawCircle(f_i);
                }
            }
            if (data.length >= 3) {
                data[data.length - 2].posX = data[data.length - 1].posX - data[data.length - 2].posX > circleSpace ? data[data.length - 2].posX : data[i - 1].posX - circleSpace
                if (data[data.length - 1].posX - data[data.length - 3].posX < circleSpace * 2) {
                    data[data.length - 2].posX = (data[data.length - 3].posX + data[data.length - 1].posX) / 2
                }
            }
            for (var g = 0; g < 5; g++) {
                img[g] = new Image();
                img[g].src = "/WeProjects/Images/txt_bg" + (g + 1) + ".png"
            }
            if (img[4].complete) {
                drawCircle(0);
            } else {
                img[4].onload = function () {
                    drawCircle(0);
                };
            }
    }

    function drawLine() {
        cvsLine.fillStyle = numShowRQ-1 < intStartDate?'#cccccc':'rgb(174,157,145)';
        //if (dWidth > cvsLine.canvas.width - widthStep - lineSpace*2) {
            //dWidth = cvsLine.canvas.width - rCircleL * 2 - lineSpace*2;
        //}
        //cvsLine.fillRect(rCircleL + lineSpace, posLineY, dWidth, 2);
        cvsLine.fillRect(lineStartPosX, posLineY, dWidth, 2);
        //if (dWidth < cvsLine.canvas.width - rCircleL * 2 - lineSpace * 2) {
        //if (rCircleL + lineSpace + dWidth * (step + 1) <= data[data.length - 1].posX) {
            //dWidth += widthStep;
            //if (rCircleL + lineSpace + dWidth - widthStep >= data[numShowRQ].posX) {
        if (lineStartPosX + dWidth >= data[numShowRQ].posX - dWidth) {
            cvsLine.fillRect(data[numShowRQ].posX - dWidth, posLineY, dWidth + rCircleL, 2);
            clearInterval(invLine);
            cvsLine.save();
            lineStartPosX = data[numShowRQ].posX + (!data[numShowRQ].subTask ? rCircleL: rCircleS);
            cvsCircle[numShowRQ].draw(numShowRQ);
        } else {
            lineStartPosX += dWidth;
        }
        //} else {
            //clearInterval(invLine);
            //cvsLine.save();
            //cvsCircle[numShowRQ].draw(numShowRQ);
        //}
        ++step;
    }

    function drawCircle(f_i) {
        //cvsCircle[f_i].restore();
        if (f_i == intEndDate || f_i == intStartDate) {
            cvsCircle[f_i].fillStyle = '#FFFFFF';
            cvsCircle[f_i].strokeStyle = numShowRQ < intStartDate?'#cccccc':'rgb(174,157,145)';
            cvsCircle[f_i].lineWidth = lineCircleL;
            cvsCircle[f_i].beginPath();
            cvsCircle[f_i].arc(data[f_i].posX, posLineY + 1, rCircleL, 0, Math.PI * 2, true);
            cvsCircle[f_i].stroke();
            cvsCircle[f_i].closePath();
            cvsCircle[f_i].fill();
        }
        cvsCircle[f_i].fillStyle = numShowRQ < intStartDate ? '#cccccc' : 'rgba(174,157,145,1)';
        cvsCircle[f_i].lineWidth = 0;
        cvsCircle[f_i].beginPath();
        cvsCircle[f_i].arc(data[f_i].posX, posLineY + 1, rCircleS, 0, Math.PI * 2, true);
        cvsCircle[f_i].closePath();
        cvsCircle[f_i].fill();
        //clearInterval(invCircle[f_i]);
        //cvsCircle[f_i].fadeOut(1000, function () { alert("111")});
        drawTxtRQ(f_i);
    }
    function drawTxtRQ(f_i) {
        var tmpY;
        cvsTxt[f_i].font = "bold 12px 微软雅黑";
        cvsTxt[f_i].fillStyle = data[f_i].subTask ? "#098dd8" : "#68635f";
        if (numShowRQ < intStartDate) {
            cvsTxt[f_i].fillStyle = "#cccccc";
        }
        if (f_i == intEndDate || f_i == intStartDate) {
            tmpY=txtYDown;
        } else {
            tmpY=txtYUp;
        }
        cvsTxt[f_i].fillText(data[f_i].forShow, data[f_i].posX - lineSpace, tmpY);
        drawTxtSM(f_i);
    }
    function drawTxtSM(f_i) {
        var tmpY;
        var imgY;
        var imgY2;
        var i = Math.floor(data[f_i].sm.length / maxLetter);
        cvsTxt[f_i].font = "12px 微软雅黑";
        cvsTxt[f_i].fillStyle = data[f_i].subTask ? "#098dd8" : "#4b4540";
        if (numShowRQ < intStartDate) {
            cvsTxt[f_i].fillStyle = "#cccccc";
        }
        if (f_i == intEndDate || f_i == intStartDate) {
            tmpY = txtYUp - txtLineHeight * 1.6;
            imgY = tmpY - txtLineHeight * (i + 1) + 1;
        } else {
            tmpY = txtYDown + txtLineHeight * 1.4;
            imgY = tmpY - txtLineHeight+1;
        }
        cvsTriangle[f_i].drawImage(img[i], data[f_i].posX - ((i > 0 ? maxLetter - 0.6 : data[f_i].sm.length) * txtLetterWidth / 2 + imgTxtSpace * 1.8), imgY, (i > 0 ? maxLetter - 0.6 : data[f_i].sm.length) * txtLineHeight + imgTxtSpace * 2, img[i].height);
        if (f_i == intEndDate || f_i == intStartDate) {
            cvsTriangle[f_i].drawImage(img[img.length - 2], data[f_i].posX - img[img.length - 2].width / 2, tmpY+4);
        } else {
            cvsTriangle[f_i].drawImage(img[img.length - 1], data[f_i].posX - img[img.length - 1].width / 2, tmpY - txtLineHeight - img[img.length - 1].height +2);
        }
        switch (i) {
            case 0:
                cvsTxt[f_i].fillText(data[f_i].sm, data[f_i].posX - data[f_i].sm.length * txtLetterWidth / 2, tmpY);
                break;
            case 1:
                if (posLineY < tmpY) {
                    cvsTxt[f_i].fillText(data[f_i].sm.substr(0, 7), data[f_i].posX - (maxLetter - 0.6) * txtLetterWidth / 2, tmpY);
                } else {
                    cvsTxt[f_i].fillText(data[f_i].sm.substring(7), data[f_i].posX - (data[f_i].sm.substring(7).length - 0.6) * txtLetterWidth / 2, tmpY);
                }
                if (f_i == intEndDate || f_i == intStartDate) {
                    tmpY -= txtLineHeight;
                } else {
                    tmpY += txtLineHeight;
                }
                if (posLineY < tmpY) {
                    cvsTxt[f_i].fillText(data[f_i].sm.substring(7), data[f_i].posX - (data[f_i].sm.substring(7).length - 0.6) * txtLetterWidth / 2, tmpY);
                } else {
                    cvsTxt[f_i].fillText(data[f_i].sm.substr(0, 7), data[f_i].posX - (maxLetter - 0.6) * txtLetterWidth / 2, tmpY);
                }
                break;
            case 2:
                break;
        }
        numShowRQ++;
        if (f_i < data.length - 1 && numShowRQ < data.length) {
            invLine = setInterval(drawLine, 15);
        } else {
            if (numShowRQ == data.length) {
                cvsCircle[0].draw(intStartDate);
            }
        }
    }

    function formateInt(f_i) {
        if (parseInt(f_i) < 10) {
            return "0" + f_i;
        } else {
            return f_i.toString();
        }
    }
    function changeDateShow(f_s) {
        var tmp = f_s.split("/");
        return parseInt(tmp[0] + tmp[1] + tmp[2]);
    }

</script>